import SwiftUI

struct UserNameInputView: View {
    @Binding var userName: String
    @State private var inputText: String = ""
    @State private var showError: Bool = false
    
    var body: some View {
        ZStack {
            // 背景渐变
            LinearGradient(
                colors: [.blue.opacity(0.6), .purple.opacity(0.5)],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            VStack(spacing: 30) {
                Spacer()
                
                // 图标
                Image(systemName: "person.circle.fill")
                    .font(.system(size: 80))
                    .foregroundStyle(
                        LinearGradient(
                            colors: [.white, .white.opacity(0.8)],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 5)
                
                VStack(spacing: 12) {
                    Text("欢迎使用")
                        .font(.system(.title, design: .rounded).weight(.bold))
                        .foregroundColor(.white)
                    
                    Text("陀螺仪数据采集系统")
                        .font(.system(.title3, design: .rounded).weight(.medium))
                        .foregroundColor(.white.opacity(0.9))
                }
                
                VStack(spacing: 16) {
                    Text("请输入您的姓名")
                        .font(.system(.body, design: .rounded).weight(.semibold))
                        .foregroundColor(.white.opacity(0.95))
                    
                    TextField("请输入姓名", text: $inputText)
                        .textFieldStyle(.plain)
                        .font(.system(.body, design: .rounded))
                        .padding(16)
                        .background(.white.opacity(0.9))
                        .cornerRadius(12)
                        .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
                        .frame(maxWidth: 280)
                    
                    if showError {
                        Text("请输入您的姓名")
                            .font(.caption)
                            .foregroundColor(.red.opacity(0.9))
                            .padding(.horizontal, 8)
                            .padding(.vertical, 4)
                            .background(.white.opacity(0.9))
                            .cornerRadius(6)
                    }
                }
                .padding(.top, 20)
                
                Button(action: saveUserName) {
                    HStack(spacing: 8) {
                        Text("开始使用")
                            .font(.system(.headline, design: .rounded).weight(.semibold))
                        Image(systemName: "arrow.right.circle.fill")
                            .font(.system(size: 18))
                    }
                    .foregroundColor(.blue)
                    .padding(.horizontal, 32)
                    .padding(.vertical, 14)
                    .background(.white)
                    .cornerRadius(25)
                    .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 5)
                }
                .padding(.top, 10)
                
                Spacer()
                Spacer()
            }
            .padding(30)
        }
        .preferredColorScheme(.dark)
    }
    
    private func saveUserName() {
        let trimmed = inputText.trimmingCharacters(in: .whitespacesAndNewlines)
        if trimmed.isEmpty {
            withAnimation {
                showError = true
            }
            // 2秒后自动隐藏错误提示
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                withAnimation {
                    showError = false
                }
            }
        } else {
            userName = trimmed
        }
    }
}

#Preview {
    UserNameInputView(userName: .constant(""))
}
